<template>
  <div>
    <Form :model="formItem" :label-width="80">
      <FormItem label="分类">
        <Row>
          <Col span="23">
            <Select v-model="formItem.give_service_type" clearable filterable>
              <Option v-for="(item, index) in serviceTypeList" v-bind:key="index" :value="item.value">{{item.label}}</Option>
            </Select>
          </Col>
        </Row>
      </FormItem>
      <FormItem label="省、市">
        <Row>
          <Col span="11">
            <Select v-model="formItem.province" clearable filterable>
              <Option v-for="(item, index) in provinceList" v-bind:key="index" :value="item.code">{{item.label}}</Option>
            </Select>
          </Col>
          <Col span="11" offset="1">
            <Select v-model="formItem.city" clearable filterable>
              <Option v-for="(item, index) in cityList" v-bind:key="index" :value="item.code">{{item.label}}</Option>
            </Select>
          </Col>
        </Row>
      </FormItem>
      <FormItem label="名称">
        <Row>
          <Col span="10">
            <Input v-model="formItem.give_service_name"></Input>
          </Col>
          <Col span="2" offset="1">
            <span>建议价格</span>
          </Col>
          <Col span="10">
            <Input v-model="formItem.give_service_price"></Input>
          </Col>
        </Row>
      </FormItem>
      <FormItem label="服务标签">
        <Row>
          <Col span="23">
            <CheckboxGroup v-model="formItem.service_label_arr">
              <Checkbox v-for="(item, index) in tabData" v-bind:key="index" :label="item.value">{{item.label}}</Checkbox>
            </CheckboxGroup>
          </Col>
        </Row>
      </FormItem>
      <FormItem label="简介">
        <Row>
          <Col span="23">
            <Input v-model="formItem.give_service_synopsis"></Input>
          </Col>
        </Row>
      </FormItem>
      <FormItem label="描述">
        <Row>
          <Col span="23">
            <Input v-model="formItem.give_service_describe" type="textarea" :row="5"></Input>
          </Col>
        </Row>
      </FormItem>
      <FormItem label="排序">
        <Row>
          <Col span="10">
            <Input v-model="formItem.sort" type="number" min="0"></Input>
          </Col>
          <Col span="2" offset="1">
            <span>状态</span>
          </Col>
          <Col span="10">
            <i-switch v-model="formItem.state" true-value="1" false-value="0">
              <span slot="open">开</span>
              <span slot="close">关</span>
            </i-switch>
          </Col>
        </Row>
      </FormItem>
      <!-- <FormItem label="显示字段">
        <Row>
          <Col span="23">
            <Table size="small" border :columns="columns" :data="tableList">
              <template slot-scope="{row, index}" slot="sort">
                <Input v-model="tableList[index].sort"></Input>
              </template>
              <template slot-scope="{row, index}" slot="field">
                <Select v-model="tableList[index].field" :transfer="true">
                  <Option v-for="(item, index) in fieldList" v-bind:key="index" :value="item.give_key">{{item.give_value}}</Option>
                </Select>
              </template>
              <template slot-scope="{row, index}" slot="action">
                <Button type="error" @click="deleteField(row)">删除</Button>
              </template>
            </Table>
          </Col>
        </Row>
        <Button type="primary" size="small" icon="ios-add" style="line-height: 21px;" @click="addTable()">添加新行</Button>
      </FormItem> -->
      <FormItem label="选择医院">
        <Row>
          <Col span="23">
            <Table size="small" border :columns="columns1" :data="tableList1">
              <template slot-scope="{row, index}" slot="hospital_name">
                <Select v-model="tableList1[index].hospital_id" :transfer="true">
                  <Option v-for="(item, index) in hospitalList" v-bind:key="index" :value="item.hospital_id">{{item.hospital_name}}</Option>
                </Select>
              </template>
              <template slot-scope="{row, index}" slot="price">
                <Input v-model="tableList1[index].price"></Input>
              </template>
              <template slot-scope="{row, index}" slot="action">
                <Button type="error" @click="deleteHospital(row)">删除</Button>
              </template>
            </Table>
          </Col>
        </Row>
        <Button type="primary" size="small" icon="ios-add" style="line-height: 21px;" @click="addTable1()">添加新行</Button>
      </FormItem>
    </Form>
  </div>
</template>
<script>
import { selectGiveServiceFieldList, getHospitalList } from '@/api/medical.js'
export default {
  name: 'basic-card',
  data () {
    return {
      cityList: [
        { label: '沈阳', code: '210100' }
      ],
      provinceList: [
        { label: '辽宁省', code: '210000' }
      ],
      serviceTypeList: [
        { label: '诊前预约', value: '诊前预约' },
        { label: '代办问诊', value: '代办问诊' },
        { label: '代办买药', value: '代办买药' },
        { label: '送取结果', value: '送取结果' },
        { label: '就医陪诊', value: '就医陪诊' },
        { label: '就医陪诊（单）', value: '就医陪诊（单）' },
        { label: '院内陪护', value: '院内陪护' }
      ],
      // formItem: {},
      tabData: [
        { label: '就医待办', value: '就医待办' },
        { label: '陪护就医', value: '陪护就医' },
        { label: '全市接送', value: '全市接送' },
        { label: '代排队排号', value: '代排队排号' },
        { label: '省时高效', value: '省时高效' }
      ],
      columns: [
        { title: '排序', slot: 'sort', align: 'center' },
        { title: '字段', slot: 'field', align: 'center' },
        { title: '操作', slot: 'action', align: 'center' }
      ],
      columns1: [
        { title: '医院', slot: 'hospital_name', align: 'center' },
        { title: '价格', slot: 'price', align: 'center' },
        { title: '操作', slot: 'action', align: 'center' }
      ],
      // tableList: [],
      fieldList: [],
      hospitalList: []
    }
  },
  props: {
    formItem: {
      type: Object,
      default: () => {
        return {}
      }
    },
    tableList: {
      type: Array,
      default: () => {
        return []
      }
    },
    tableList1: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  methods: {
    addTable () { // 添加字段
      let index = this.tableList.length
      if (index === 0) {
        this.tableList.push({})
      }
      if (index > 0 && this.tableList[index - 1].sort !== '' && this.tableList[index - 1].sort !== undefined && this.tableList[index - 1].field !== '' && this.tableList[index - 1].field !== undefined) {
        this.tableList.push({})
      }
    },
    addTable1 () { // 添加字段
      let index = this.tableList1.length
      if (index === 0) {
        this.tableList1.push({})
      }
      if (index > 0 && this.tableList1[index - 1].hospital_id !== '' && this.tableList1[index - 1].hospital_id !== undefined && this.tableList1[index - 1].price !== '' && this.tableList1[index - 1].price !== undefined) {
        this.tableList1.push({})
      }
    },
    getGiveServiceFieldList () {
      selectGiveServiceFieldList().then((res) => {
        if (res.data.errcode === 0) {
          this.fieldList = res.data.data
          console.log(this.fieldList)
        }
      })
    },
    getHospitalData () {
      getHospitalList().then((res) => {
        if (res.data.errcode === 0) {
          this.hospitalList = res.data.data
          console.log(this.hospitalList)
        }
      })
    },
    deleteField (index) {
      this.tableList.splice(index, 1)
    },
    deleteHospital (index) {
      this.tableList1.splice(index, 1)
    }
  },
  mounted () {
    this.getGiveServiceFieldList()
    this.getHospitalData()
  }
}
</script>
<style scoped lang="less">
</style>
